<template>
  <div class="assign-role">
    <div class="role-list">
      <!-- 角色列表 -->
      <el-checkbox-group v-model="checkList">
        <!-- 页面上用户看到的值，和发送后端请求的值是不一样 -->
        <el-checkbox v-for="item in list" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
        <!-- <el-checkbox label="复选框 A" />
        <el-checkbox label="复选框 B" />
        <el-checkbox label="复选框 C" />
        <el-checkbox label="禁用" disabled />
        <el-checkbox label="选中且禁用" disabled /> -->
      </el-checkbox-group>
    </div>
    <div class="role-btns">
      <el-button type="primary" round @click="onSubmit">确定</el-button>
      <el-button round @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getRolesListRequest } from '@/api/setting'
import { userAssignRolesRequest, userInfoDetailRequest } from '@/api/user'

export default {
  name: 'AssignRoleCom',
  props: {
    currentId: {
      type: String,
      default: ''
      // type: Object, Array
      // default: () => []
    }
  },
  data() {
    return {
      // 多选框被选中的列表
      checkList: [],
      // data里面不要写太多变量。能在函数里面写局部变量的就写局部变量
      // data上面已定义变量，vue就会给数据劫持，就会自动给数据添加双向数据绑定，消耗性能
      // 默认展示的数组列表
      list: []
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    async getRolesList() {
      // const form = {xxxxx}
      try {
        const res = await getRolesListRequest({ page: 1, pagesize: 1000 })
        if (res.success) {
          this.list = res.data.rows
        } else {
          // 如果请求成功，但是业务失败
          this.$message.error(res.message)
        }

        // 下面是根据id获取用户信息的接口
        const res2 = await userInfoDetailRequest(this.currentId)
        if (res2.success) {
          // 这个就是选中角色的回显, 为了防止后端返回的数据，不是数组，是一个null
          // 那如果给checkList = null 页面就会报错，因为checkbox需要的是数组类型，不是null
          this.checkList = res2.data.roleIds || []
          // this.checkList = null
        } else {
          // 一般为了防止后端返回的数据没有message属性，提示就会为空，用户体验不好
          // 使用逻辑中断，提示用户体验，先展示后端的错误消息，在显示前端兜底的错误信息
          this.$message.error(res2.message || '根据id获取用户信息的接口失败')
        }
      } catch (error) {
        this.$message.error('获取角色列表失败')
      }
    },
    cancel() {
      // 子组件向外抛出一个事件
      this.$emit('close')
    },
    async onSubmit() {
      try {
        const res = await userAssignRolesRequest({
          id: this.currentId,
          roleIds: this.checkList
        })
        if (res.success) {
          // 关闭弹出框
          this.cancel()
        } else {
          this.$message.error('分配角色的接口错误')
        }
      } catch (err) {
        console.log('userAssignRolesRequest: ', err)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.role-btns {
  text-align: right;
}
</style>
